<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PWA Website: contact us</title>

<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/css/styles.css">

<link rel="manifest" href="/manifest.json">

<meta name="theme-color" content="#ace">
<link rel="icon" sizes="192x192" href="/images/logo/logo192.png">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon-precomposed" sizes="192x192" href="/images/logo/logo192.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/images/logo/logo180.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/images/logo/logo152.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/logo/logo072.png">
<link rel="shortcut icon" href="/images/logo/logo016.png">
<link rel="shortcut icon" href="/favicon.ico">

<meta name="application-name" content="PWA Website">
<meta name="description" content="This is a demonstration website which uses Progressive Web App technologies to provide offline functionality.">
<meta name="keywords" content="website, pwa, offline">
<meta name="author" content="Craig Buckler">
<meta name="robots" content="noindex, nofollow">

</head>
<body>

<!-- header -->
<header>

  <!-- logo -->
  <a href="/" class="logo"><img src="/images/logo/logo152.png" alt="PWA"></a>

</header>

<!-- content -->
<main>
<article>

  <figure data-href="/images/hero/map-lo.jpg" data-srcset="/images/hero/map-lo.jpg 600w, /images/hero/map-hi.jpg 1200w" class="primary progressive replace">
    <img src="/images/hero/map-pv.jpg" class="preview" alt="map" />
  </figure>

  <h1>We Want to Work With You</h1>

  <p>This is an example website. We now want you to contact us. Rather than provide a simple telephone number or email address, we'll force you to fill in a complex questionnaire. You'll need to answer every question we can think of because every field will be mandatory:</p>

  <figure class="boxout2">
    <a href="/images/city1.jpg" class="progressive replace">
      <img src="/images/city1-pv.jpg" class="preview" alt="city" />
    </a>
    <figcaption>This could be the view from our office. It's not, but it could be. If you pay us enough.</figcaption>
  </figure>

  <ol>
    <li>What's your budget?</li>
    <li>Could we squeeze you for a little more?</li>
    <li>Can we access your bank account and check?</li>
    <li>Do you have any more cash in your pocket?</li>
    <li>What's your favorite cheese?</li>
    <li>Do you have any dietary requirements?</li>
    <li>How much do you love us?</li>
    <li>Can we quote you on our website?</li>
    <li>Can we massage the meaning of your feedback to suit our requirements?</li>
    <li>Yeah, OK - give us an overview of your project. In a sentence. Preferably a word. Not that we care &ndash; we'll do our own thing anyway.</li>
  </ol>

  <figure class="boxout1">
    <a href="/images/city2.jpg" class="progressive replace">
      <img src="/images/city2-pv.jpg" class="preview" alt="city" />
    </a>
    <figcaption>Yes, it's another impressive city scape but we actually work from a <crowed></crowed> little office on the edge of an industrial estate.</figcaption>
  </figure>

  <h2>Form frustration</h2>

  <p>It'll take you three hours to fill in our contact form. It will fail when you hit SUBMIT because we neglected to check something trivial. You'll panic and hit Back only to see a <em>"this page is no longer available"</em>. Yep, you'll have lost everything.</p>

  <h2>Shocking sales</h2>

  <p>Completing our contact form is irrelevant.</p>

  <p>Despite being a tech company, our website doesn't link with our sales systems. Even if it did, the sales team would ignore your brief because reading it is too much effort. We'll get one of our less able imbeciles to contact you directly so you can give us all the information again.</p>

</article>
</main>

<!-- footer -->
<footer>
  <p>&copy;NOW</p>
  <p>All rights reserved.</p>
  <p>We don't track you or do anything nasty. Or so we say.</p>
  <p>Nothing to see here. Please move along.</p>
</footer>

<!-- menu link -->
<div id="menu"><a href="#nav">menu</a></div>

<!-- navigation -->
<nav id="nav">
  <ul>
    <li><a href="#menu" title="close menu" class="close">&#x2715;</a></li>
    <li><a href="/" class="nav">home</a></li>
    <li><a href="/work/" class="nav">work</a></li>
    <li><a href="/about/" class="nav">about</a></li>
    <li><a href="/contact/" class="active nav">contact</a></li>
  </ul>
</nav>

<script src="/js/main.js" defer></script>
</body>
</html>
